import { useState, useEffect } from 'react'
import { View, ScrollView } from '@tarojs/components'
import { getReportRead } from '@/axios/report'
import { IHeaderBox, IBarCharts } from '@/components/index'
import { colChartStat } from '@/axios/subject'
import './index.scss'

interface MIProps {}

const MIIndex: React.FC<MIProps> = () => {
  const [feedBack, setFeedBack] = useState<string>('')
  const [chartData, setChartData] = useState<API.ChartStatItem[]>([])

  const [triggered, setTriggered] = useState<boolean>(false)

  const getChartData = async () => {
    try {
      const results = await colChartStat()
      setChartData(results)
    } catch {}
  }

  const onRefresh = () => {
    getChartData()
    init()
    setTriggered(true)
  }

  const init = async () => {
    try {
      const results = await getReportRead({ subjectId: 2 })
      setFeedBack(results)
    } catch {}
  }

  useEffect(() => {
    init()
    getChartData()
  }, [])

  return (
    <ScrollView
      scrollY
      className='scrollview'
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
    >
      <View className='common_page'>
        <View className='card_box chart_box'>
          <IHeaderBox title='学科兴趣' />
          <IBarCharts id='si_chart' data={chartData} fontSize={9} />
        </View>
        <View className='card_box data_box'>
          <IHeaderBox title='反馈建议' />
          <View className='data_info'>
            <View
              className='feedBack'
              dangerouslySetInnerHTML={{ __html: feedBack }}
            ></View>
          </View>
        </View>
      </View>
    </ScrollView>
  )
}

export default MIIndex
